<template>
  <CHeader fixed class="m_header" id="m_header" v-on:mouseover="overShow">
    <CNavbar expandable="sm" type="dark" class="navbarstyle">
      <CToggler in-navbar @click="collapsed = !collapsed" />
      <CNavbarBrand href="#">
        <div class="brand_title" style="width: 420px;">
          <div
            style="border-radius: 30px;
    padding: 4px;
    margin-right: 15px;
    overflow: hidden;
    border: 2px solid #909090;
    background-color: #fff;"
          >
            <img src="../assets/icons/log.png" alt class="imgSty" style="width: 40px;height: 40px;" />
          </div>

          <!--<img
            src="../assets/icons/log_piecloud.png"
            alt
            class="imgSty"
            style="width: 190px;height: auto;margin-right: 17px;"
          />-->
          <div>
            <div class="name">国家生态保护红线监管平台</div>
            <div class="name1">生态云数据加工处理平台</div>
            <!--<div class="name1" style="margin-top: 4px;">遥感数据处理云平台</div>
            <div class="name" style="margin-top: 0px;">提供多源遥感数据在线生产与分析服务</div>-->
          </div>
        </div>
      </CNavbarBrand>
      <CCollapse :show="collapsed" navbar>
        <CNavbarNav class="mr-4">
          <CHeaderNavItem
            title="首页"
            class="px-3"
            :class="{'active_tab': currentPath == '/adminHome'}"
          >
            <div @click="showStatistical" class style="background:rgba(0,0,0,0);">
              <img
                src="@/assets/icons/home.png"
                alt
                class="commonbg svgsize"
                style="background:rgba(0,0,0,0);"
              />
              <p class="pstyle" style="background:rgba(0,0,0,0);">首页</p>
            </div>
          </CHeaderNavItem>
          <!-- <CHeaderNavItem title="数据查询" class="px-3" :class="{'active_tab': currentPath == ''}">
            <div @click="showStatistical" class style="background:rgba(0,0,0,0);">
              <img
                src="@/assets/icons/search.png"
                alt
                class="commonbg"
                style="background:rgba(0,0,0,0);width: 24px;height: 24px;"
              />
              <p class="pstyle" style="background:rgba(0,0,0,0);">数据查询</p>
            </div>
          </CHeaderNavItem>-->
          <CHeaderNavItem
            title="处理加工"
            class="px-3"
            :class="{'active_tab': currentPath == '/processing'}"
          >
            <div @click="showDataquery" class style="background:rgba(0,0,0,0);">
              <img
                src="@/assets/icons/circleNotch.png"
                alt
                class="commonbg svgsize"
                style=" background:rgba(0,0,0,0);"
              />
              <p class="pstyle" style="background:rgba(0,0,0,0);">处理加工</p>
            </div>
          </CHeaderNavItem>
          <CHeaderNavItem
            title="质量检查"
            class="px-3"
            :class="{'active_tab': currentPath == '/qualityCheck'}"
          >
            <div @click="showCheck" class style="background:rgba(0,0,0,0);">
              <img
                src="@/assets/icons/qualityCheck.png"
                class="commonbg svgsize"
                alt
                style="background:rgba(0,0,0,0); "
              />
              <p class="pstyle" style="background:rgba(0,0,0,0);">质量检查</p>
            </div>
          </CHeaderNavItem>
          <CHeaderNavItem
            title="任务中心"
            class="px-3"
            :class="{'active_tab': currentPath == '/taskManage/allTask'}"
          >
            <div @click="showTask" class style="background:rgba(0,0,0,0);">
              <img
                src="@/assets/icons/task.svg"
                alt
                class="commonbg svgsize"
                style=" background:rgba(0,0,0,0);"
              />
              <p class="pstyle" style="background:rgba(0,0,0,0);">任务中心</p>
            </div>
          </CHeaderNavItem>
          <CHeaderNavItem
            title="筛选处理"
            class="px-3"
            :class="{'active_tab': currentPath == '/screenProcess/queryDeal'}"
          >
            <div @click="showQuery" class style="background:rgba(0,0,0,0);">
              <img
                src="@/assets/icons/task.svg"
                alt
                class="commonbg svgsize"
                style=" background:rgba(0,0,0,0);"
              />
              <p class="pstyle" style="background:rgba(0,0,0,0);">筛选处理</p>
            </div>
          </CHeaderNavItem>
          <CHeaderNavItem
            title="资源监控"
            class="px-3"
            :class="{'active_tab': currentPath == '/monitor/server'}"
          >
            <div @click="showMonitor" class style="background:rgba(0,0,0,0);">
              <img
                src="@/assets/icons/around.svg"
                alt
                class="commonbg svgsize"
                style="background:rgba(0,0,0,0); "
              />
              <p class="pstyle" style="background:rgba(0,0,0,0);">资源监控</p>
            </div>
          </CHeaderNavItem>
          <CHeaderNavItem
            title="模型管理"
            class="px-3"
            :class="{'active_tab': currentPath == '/model/common/model'}"
          >
            <div @click="showModel" class style="background:rgba(0,0,0,0);">
              <img
                src="@/assets/icons/model.svg"
                class="commonbg svgsize"
                alt
                style=" background:rgba(0,0,0,0);"
              />
              <p class="pstyle" style="background:rgba(0,0,0,0);">模型管理</p>
            </div>
          </CHeaderNavItem>
          <!-- <CHeaderNavItem
            title="我的订单"
            class="px-3"
            :class="{'active_tab': currentPath == '/order/dataOrder'}"
           >
            <div @click="showOrder" class style="background:rgba(0,0,0,0);">
              <img
                src="@/assets/icons/shoppingCart.png"
                class="commonbg"
                alt
                style=" background:rgba(0,0,0,0);"
              />
              <p class="pstyle" style="background:rgba(0,0,0,0);">我的订单</p>
            </div>
          </CHeaderNavItem>-->
          <CHeaderNavItem
            title="系统管理"
            class="px-3"
            :class="{'active_tab': currentPath == '/manage/dictManage'}"
          >
            <div @click="showManage" class style="background:rgba(0,0,0,0);">
              <img
                src="@/assets/icons/setting.png"
                alt
                class="commonbg svgsize"
                style="background:rgba(0,0,0,0);"
              />
              <p class="pstyle" style="background:rgba(0,0,0,0);">系统管理</p>
            </div>
          </CHeaderNavItem>
        </CNavbarNav>
      </CCollapse>
      <CNavbarNav class="ml-auto">
        <CDropdown class="CDropdownstyle">
          <template #toggler>
            <div @click="showAdmin" class="adminBtn">
              <div
                style="background: rgba(0, 0, 0, 0.43);width: 258px;height: 200px;position: absolute;z-index: -1;left: -38px;transform: rotate(-66deg);"
              ></div>
              <img src="@/assets/icons/admin.png" alt class="svgsize" />
              <p style="margin-top:-2px">{{username}}</p>
            </div>
          </template>
          <!-- 无接口，暂时注释用户手册和精度报告 -->
          <!-- <CDropdownItem v-if="(userlogin == 'Tourist')?false:true">
            <span>
              <img src="../assets/icons/help.svg" class="hradericon" alt />
              <p class="itemstyle">用户手册</p>
            </span>
          </CDropdownItem>
          <CDropdownItem v-if="(userlogin == 'Tourist')?false:true">
            <span>
              <img src="../assets/icons/baogao.svg" class="hradericon" alt />
              <p class="itemstyle">精度报告</p>
            </span>
          </CDropdownItem>-->
          <CDropdownItem v-if="(userlogin == 'Tourist')?false:true" @click="changePwd">
            <!-- <CIcon name="cil-lock-locked" /> -->
            <span>
              <img src="../assets/icons/mima.svg" class="hradericon" alt />
              <p class="itemstyle">修改密码</p>
            </span>
          </CDropdownItem>
          <CDropdownItem v-if="(userlogin == 'Tourist')?false:true" @click="Logout">
            <!-- <CIcon name="cil-account-logout" /> -->
            <span>
              <img src="../assets/icons/out.svg" class="hradericon" alt />
              <p class="itemstyle">退出登录</p>
            </span>
          </CDropdownItem>
          <CDropdownItem v-if="(userlogin == 'Tourist')?true:false" @click="Logout">
            <span>
              <CIcon name="cil-account-logout" />
              <!-- <img src="../assets/icons/log.png" alt=""> -->
              <p class="itemstyle">登 录</p>
            </span>
          </CDropdownItem>
        </CDropdown>
      </CNavbarNav>
    </CNavbar>
    <Modal v-model="show" title="修改密码" @on-ok="changeOk" @on-cancel="changeCancel" centered>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="用户名"
              placeholder="请输入用户名"
              horizontal
              v-model="userData.username"
              readonly
            />
            <CInput
              label="旧密码"
              type="password"
              placeholder="请输入旧密码"
              horizontal
              v-model="userData.oldPwd"
            />
            <CInput
              label="新密码"
              type="password"
              placeholder="请输入新密码"
              horizontal
              v-model="userData.newPwd"
            />
            <CInput
              label="确认密码"
              type="password"
              placeholder="再次输入新密码"
              horizontal
              v-model="userData.conPwd"
            />
          </CForm>
        </CCol>
      </CRow>
    </Modal>
  </CHeader>
</template>

<script>
// import TheHeaderDropdownAccnt from "./TheHeaderDropdownAccnt";
// import statistical from "@/views/statistical.vue";
// import Processing from "@/page/processing/Processing.vue";
// import QualityCheck from "@/page/qualityCheck/QualityCheck.vue";
// import Task from "@/containers/headerComponents/Task.vue";
// import Monitor from "@/containers/headerComponents/Monitor.vue";
// import Model from "@/containers/headerComponents/Model.vue";
// import _custom from '@/assets/scss/_cutom.scss'
// import dataShare from './dataShare.vue'
// import store from "./../router/stores/stores.js";
import { mapActions, mapGetters } from "vuex";
export default {
  // name: "TheHeader",
  components: {
    // dataShare
    // TheHeaderDropdownAccnt
    // Processing,
    // QualityCheck,
    // Task,
    // Monitor,
    // Model
  },
  data() {
    return {
      userlogin: "user",
      shadowSearch: "",
      collapsed: false,
      logo: false,
      nowDate: "",
      dataquery: false,
      showHomepage: false,
      check: false,
      task: false,
      monitor: false,
      model: false,
      catalogData: [],
      username: "",
      show: false,
      userData: {
        username: "",
        oldPwd: "",
        newPwd: "",
        conPwd: "",
        isMd5: false,
        systemId: 3,
      }
    };
  },
  computed: {
    currentPath() {
      return this.$route.path || "";
    }
  },
  mounted() {
    this.nowDate = this.$moment().format("YYYY年MM月DD日");
  },
  methods: {
    // ...mapActions(["logout"]),
    // ...mapGetters(["getSystemPermissions"]),
    showAdmin() {
      this.showAdmin = !this.showAdmin;
    },
    switchNavData(path) {
      let self = this;
      this.$router.replace(path);
      // let data = this.$parent.getNavDataByRouter(path);
      if (path.startsWith("/processing")) {
        self.getTreeList(2);
      } else if (path.startsWith("/qualityCheck")) {
        self.getTreeList(1);
      } else if (path.startsWith("/taskManage")) {
        //
        self.getTaskCatalog(path);
      }else {
        for (let i = 0; i < self.catalogData.length; i++) {
          let item = self.catalogData[i]._children;
          if (self.catalogData[i].to == path) {
            if (item == undefined) {
              item = [];
            }
            this.$parent.refresh(item);
          }
        }
      }
    },
    // token验证
    checkTokenValid() {
      // let self = this;
      // let path = this.GlobalUrlPath.catalog.checkToken;
      // self.http.get(path).then(res => {
      //   // console.log("token验证");
      // });
    },
    // end
    showStatistical() {
      this.checkTokenValid();
      this.switchNavData("/adminHome");
    },
    showDataquery() {
      this.checkTokenValid();
      this.$store.commit("setHeaderSation", "yessearch");
      this.$emit("searchinput", this.shadowSearch);
      this.switchNavData("/processing");
    },
    showCheck() {
      this.checkTokenValid();
      this.$store.commit("setHeaderSation", "yessearch");
      this.$emit("searchinput", this.shadowSearch);
      this.switchNavData("/qualityCheck");
    },
    showTask() {
      this.checkTokenValid();
      this.$store.commit("setHeaderSation", "nosearch");
      this.$emit("searchinput", this.shadowSearch);
      this.switchNavData("/taskManage");
    },
    showQuery(){
      this.checkTokenValid();
      this.$store.commit("setHeaderSation", "nosearch");
      this.$emit("searchinput", this.shadowSearch);
      this.switchNavData("/screenProcess");
    },
    showMonitor() {
      this.checkTokenValid();
      this.$store.commit("setHeaderSation", "nosearch");
      this.$emit("searchinput", this.shadowSearch);
      this.switchNavData("/monitor");
    },
    showModel() {
      this.checkTokenValid();
      this.$store.commit("setHeaderSation", "nosearch");
      this.$emit("searchinput", this.shadowSearch);
      this.switchNavData("/model");
    },
    showOrder() {
      this.checkTokenValid();
      this.$store.commit("setHeaderSation", "nosearch");
      this.$emit("searchinput", this.shadowSearch);
      this.switchNavData("/order");
    },
    showManage() {
      //系统管理
      // this.checkTokenValid()
      this.$store.commit("setHeaderSation", "nosearch");
      this.$emit("searchinput", this.shadowSearch);
      this.switchNavData("/manage");
    },
    // 获取树结构
    getTreeList(groupId) {
      let self = this;
      if (groupId == 2) {
        let path = this.$api.homeLoginOthers.workFlowGroup;
        let params = {
          groupId: groupId,
          systemId:systemId
        };
        this.http.get(path, params).then(res => {
          if (res.data.code == 0) {
            let list = res.data.data;
            for (var i = 0; i < list.length; i++) {
              list[i].name = list[i].title;
              list[i].icon = "cil-settings";
              if (list[i].children.length == 0) {
                list[i]._name = "CSidebarNavItem";
                list[i].to = "/processing/commonx/" + list[i].id;
              } else {
                list[i]._name = "CSidebarNavDropdown";
              }
              let children = list[i].children;
              for (let j = 0; j < children.length; j++) {
                children[j].name = children[j].title;
                if (children[j].children.length == 0) {
                  children[j]._name = "CSidebarNavItem";
                  children[j].to = "/processing/commonx/" + children[j].id;
                } else {
                  children[j]._name = "CSidebarNavDropdown";
                }
              }
              list[i]._children = children;
            }
            self.$parent.refreshcolor(list, groupId);
          } else {
            self.$Message.error(res.data.message);
          }
        });
      }
      if (groupId == 1) {
        let path = this.$api.homeLoginOthers.getLeftTreeMenu + groupId;
        this.http.get(path).then(res => {
          if (res.data.code == 0) {
            let list = res.data.data;
            for (var i = 0; i < list.length; i++) {
              list[i].name = list[i].title;
              list[i].icon = "cil-settings";
              if (list[i].children.length == 0) {
                list[i]._name = "CSidebarNavItem";
                list[i].to = "/processing/commonq/" + list[i].id;
              } else {
                list[i]._name = "CSidebarNavDropdown";
              }
              let children = list[i].children;
              for (let j = 0; j < children.length; j++) {
                children[j].name = children[j].title;
                if (children[j].children.length == 0) {
                  children[j]._name = "CSidebarNavItem";
                  children[j].to = "/processing/commonq/" + children[j].id;
                } else {
                  children[j]._name = "CSidebarNavDropdown";
                }
              }
              list[i]._children = children;
            }
            self.$parent.refreshcolor(list, groupId);
          } else {
            self.$Message.error(res.data.message);
          }
        });
      }
    },
    // 任务中心左侧树
    getTaskCatalog(path) {
      if (path.startsWith("/taskManage")) {
        let path = this.$api.homeLoginOthers.queryTaskCatalog;
        this.http.get(path).then(res => {
          if (res.data.code == 0) {
            let dataList = res.data.data;
            this.$parent.refresh(dataList);
          }
        });
      }
    },
    getCatalog() {
      let self = this;
      let path = this.$api.homeLoginOthers.getMyCatalog;
      let param = {
        systemId: systemId,
        type: 0,
        treeType: 3
      };
      this.http.get(path, param).then(res => {
        if (res.data.success) {
          self.catalogData = res.data.data;
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    Logout() {
      let _this = this;
      let path = this.$api.homeLoginOthers.logout;
      this.http
        .get(path)
        .then(res => {
          //移除当前用户登录信息
          // _this.removePIE();
          _this.removeSTHX();
          _this.$store.dispatch("logout").then(() => {
            _this.$router.push({ path: "/pages/login" });
          });
          // window.location.href ="http://cloud.piesat.cn/#/login"
        })
        .catch(err => {});
    },
    removeSTHX() {},
    removePIE() {
      window.sessionStorage.removeItem("PIECloud-Token");
      window.sessionStorage.removeItem("USERID");
    },
    changePwd() {
      this.show = true;
      this.userData.username = this.username;
    },
    changeOk() {
      let _this = this;
      let path = this.$api.homeLoginOthers.changePwd;
      let param = _this.userData;
      this.http
        .post(path, param)
        .then(res => {
          if (res.data.success) {
            this.$Message.success(res.data.message + "，即将重新登录");
            setTimeout(function() {
              _this.$router.push({
                path: "/pages/login"
              });
              _this.$store.dispatch("logout");
            }, 1000);
          } else {
            this.$Message.console.error();
            res.data.message;
          }
        })
        .catch(err => {});
    },
    changeCancel() {
      this.show = false;
    },
    overShow() {
      console.log("hello");
    }
  },
  mounted() {
    iframe;
    let user = JSON.parse(window.sessionStorage.getItem("user"));
    if (user == null || user.userName == null) {
      this.username = "游  客";
      this.userlogin = "Tourist";
    } else {
      this.username = user.userName;
    }
    this.getCatalog();
  }
};
</script>
<style lang="less" scoped>
.commonbg {
  /* background:rgba(0,0,0,0) */
  margin-top: 5px;
}
.mr-4 .active_tab {
  background: rgba(0, 0, 0, 0.5);
  height: 60px;
  /*border-radius: 15px;*/
  /* 发布页面调整 */
  /* margin-top: -6px; */
  background: rgba(0, 0, 0, 0.5) !important;
  height: 52px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 2px solid #0d36ba;
  border-bottom: 0;
  margin-top: 2px;
  box-shadow: 0px 0px 7px #0b2fa0;
}

.mr-4 .active_tab div {
  margin-top: -2px !important;
}

.mr-4 :hover {
  background: rgba(0, 0, 0, 0.3);
  /*border-radius: 15px;*/
  /* height: 58px; */
  /* margin-top: -4px; */
  background: linear-gradient(#00000000, #000000bd);
}
/* .px-3{ */
/* pointer-events:none */
/* } */

.mr-4 {
  font-size: 16px;
  justify-content: flex-end;
  display: flex;
  width: 100%;
  margin-right: 0rem !important;
}

.px-3 {
  color: aliceblue;
  /*color: aliceblue;
    // display: block;
    cursor: pointer;
    height: 60px;
    // display: flex;
    align-items: center;
    width: 10%;
    float: left;*/
  font-size: 12px !important;
  color: #fff;
  cursor: pointer;
  height: 60px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 9%;
  min-width: 100px;
  float: left;
  letter-spacing: 1px;
}
.pointer {
  cursor: pointer;
}
.brand_title {
  display: flex;
  align-items: center;
  width: 400px;
  width: 320px;

  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 30px;
  padding-left: 10px;
  height: 60px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.brand_title .name {
  font-size: 10px;
  letter-spacing: 0.34px;
  color: #fff;
  vertical-align: sub;
  letter-spacing: 2px;
  margin-bottom: 0px;
  margin-top: 4px;
}
.brand_title .name1 {
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
}

.logoWarp {
  border-radius: 36px;
  background: #fff;
  border: 3px solid #999;
  margin-right: 16px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  // width: 210px;//演示完成还50px
  width: 50px;

  height: 50px;
  margin-left: 20px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 20px;
  border-radius: 25px;
}
.imgSty {
  width: 40px;
  // width: 210px;//演示完成还50px
  width: 35px;
  height: 35px;
}
.px-3 div {
  text-align: center;
  margin-top: 2px;
}
.m_header {
  height: 65px;
  display: flex;
  align-items: center;
  position: fixed !important;
}
.brand_title1 {
  align-items: center;
  width: 400px;
  display: none;
}
.dropdown-item :hover {
  background: #000;
}
// .pl-3,
.px-3 {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
/* @media screen and (max-width: 1400px) {
        .brand_title1 .name {
           display: none;
        } */
/* .brand_title {
           width:400px
        } */
/* } */
// @media screen and (min-width: 1477px) {
// .px-3{
// width: 150px;
// }
// }
// @media screen and (max-width: 1454px) {
.pstyle {
  font-size: 1rem;
}
@media screen and (max-width: 1366px) {
  .pstyle {
    font-size: 0.8rem;
  }
}
//   .brand_title {
//     display: none;
//   }
//   .brand_title1 {
//     display: block;
//   }
//   .showdown {
//     display: none;
//   }
// }
@media screen and (max-width: 1166px) {
  .pstyle {
    display: none;
    // width: 64px;
    //     white-space: nowrap;
    //     text-overflow: ellipsis;
    //     overflow: hidden;
    // display: none;
    //     margin-top: 0;
    //     margin-bottom: 0rem;
  }
  .commonbg {
    /* background:rgba(0,0,0,0) */
    margin-top: 20px;
  }
}
.brand_middle {
  display: flex;
}
.adminBtn {
  // display: flex;
  // position: fixed;
  top: 17px;
  right: 0px;
  // padding-left: 100px;
  vertical-align: middle;
  width: 150px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  overflow: hidden !important;
  position: relative;
  left: 0;
  top: 0;
  height: 60px;
  padding-top: 4px;
}
.adminBtn img {
  width: 24px;
  height: 24px;
  margin-top: 5px;
}
p {
  margin-bottom: 0px;
}
</style>

<style>
/* #m_header .mr-4 a:active, a:hover{ */
/* background-color: #fff; */
/* } */
#m_header .dropdown-item {
  background-color: #fff;
  /* padding: 0; */
}
#m_header .dropdown-item :hover {
  background-color: rgba(0, 0, 0, 0);
}
#m_header .dropdown-menu {
  padding: 0;
}
div,
img,
p {
  background: rgba(0, 0, 0, 0);
}
.navbar {
  padding: 0px;
}
.navbarstyle {
  height: 59px;
  width: 100%;
}
/* .ml-auto { */
/*background-color: #000;
    padding: 5px;*/
/* } */

.ml-auto .dropdown-menu {
  top: 7px !important;
}

.svgsize {
  height: 24px;
  width: 24px;
}
.itemstyle {
  margin-left: 19px;
  display: inline-block;
  width: 60px;
  text-align-last: justify;
}

.hradericon {
  width: 16px;
  height: 16px;
}
</style>
